<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-17 22:48:58
 * @LastEditTime: 2022-05-20 21:57:28
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description:
-->
<template>
  <div class="hamburger-container" @click="toggleClick" id='guide-hamburger'>
  <div>
    <svg-icon class-name="hamburger" :icon="icon"></svg-icon>
  </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const icon = computed(() => {
  return store.getters.sidebarOpen ? 'hamburger-opened' : 'hamburger-closed'
})
const toggleClick = () => {
  store.commit('triggerSidebarOpen')
}
</script>

<style lang="scss" scoped>
  .hamburger-container {
  padding: 0 16px;
  .hamburger {
    display: inline-block;
    line-height: 20px;
    width: 20px;
    height: 20px;
  }
}

</style>
